// 分组下拉菜单
import { extractModel } from '@/utils/tools'
export  default {
    name: 'c-i-select-group',
    functional: true,

    render(h, context){
        
        let {value, callback, conf} = extractModel(context)
        let {
            
            size,
            options,

            multiple,
            disabled,
            clearable,
            filterable,
            remote,
            loading,
            loadingRext,
            label,
            placeholder,
            placement,
            transfer,
            
            
            labelInValue,
            notFoundText,
            remoteMethod,

            onChange,
            
        } = conf

        let tempalate = {

            label: 'kind_01',
            options: [

                {
                    label: 'op01',
                    value: 1
                }
                
            ]
            
        }
        
        function buildGroup(group){
            
            let groupCache = [];

            group.forEach(item =>{


                let optionsCache = []
                
                item.options.forEach(option =>{

                    optionsCache.push(

                        <i-option value={option.value} key={option.value}>
                            {option.label}
                        </i-option>
                        
                    )
                    
                })
                
                groupCache.push(
                    
                    <option-group label={item.label}>
                        {optionsCache}
                    </option-group>
                    
                )
                
            })
            
            return groupCache;
            
        }

        function change(arg){

            if(onChange){
                onChange(arg)
            }

            callback(arg)
        }

        return (

            <i-select

            multiple={multiple}
            disabled={disabled}
            clearable={clearable}
            filterable={filterable}
            remote={remote}
            loading={loading}
            loadingRext={loadingRext}
            label={label}
            placeholder={placeholder}
            placement={placement}
            transfer={transfer}
            
            
            label-in-value={labelInValue}
            not-found-text={notFoundText}
            remote-method={remoteMethod}
            
            value={value}
            onChange={change}
            onInput={change}
            size={size || 'small'}>

                {buildGroup(options)}

            </i-select>
            
        )


        
    }
    
}